<div class="login-container">
  <div class="login-form">
    <h2>用户登录</h2>
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="username">用户名</label>
        <input 
          type="text" 
          id="username" 
          formControlName="username" 
          class="form-control"
          [class.is-invalid]="loginForm.get('username')?.invalid && loginForm.get('username')?.touched">
        @if (loginForm.get('username')?.invalid && loginForm.get('username')?.touched) {
          <div class="invalid-feedback">
            请输入用户名
          </div>
        }
      </div>

      <div class="form-group">
        <label for="password">密码</label>
        <input 
          type="password" 
          id="password" 
          formControlName="password" 
          class="form-control"
          [class.is-invalid]="loginForm.get('password')?.invalid && loginForm.get('password')?.touched">
        @if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {
          <div class="invalid-feedback">
            请输入密码
          </div>
        }
      </div>

      @if (error()) {
        <div class="alert alert-danger">
          {{ error() }}
        </div>
      }

      <div class="form-group">
        <button 
          type="submit" 
          class="btn btn-primary"
          [disabled]="loginForm.invalid">
          登录
        </button>
      </div>
    </form>
  </div>
</div>